<template>
  <div>
    <p-modal
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >

        <p-form-model-item
          ref="detailValue"
          label="项目内容"
          prop="detailValue"
        >

          <p-select v-model="form.detailValue" @change="trainPathChange">
            <p-select-option v-for="(item, key) in hrTrainPathDetailTypeKeys" :key="key" :value="key">
              {{item}}
            </p-select-option>
          </p-select>          

        </p-form-model-item>

        <p-form-model-item ref="remark" label="备注" prop="remark">
          <p-input v-model="form.remark" />
        </p-form-model-item>
      </p-form-model>
    </p-modal>
  </div>
</template>
<script>
import { postAction, getAction, putAction, deleteAction } from "@/api/manage";
import { getDictItemsArr } from "@/utils/util";

export default {
  props: {
    selectedId: String || Number
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      state: "add",
      form: {
        detailValue: "",
        projectContent: "",
        remark: "",
      },
      rules: {
        detailValue: [
          { required: true, message: "请选择培项目内容", trigger: "blur" },
        ],
        remark: [{ required: true, message: "请选择备注", trigger: "blur" }],
      },
      proLineList: [],
      hrTrainPathDetailTypeKeys: {
      },
      url: {
        add: "/mes-manpower/mesHrTrainPathDetail",
      },
    };
  },
  computed: {
    title(){
      return  {"add": "新增", "edit": "编辑"}[this.state]
    }
  },    
  mounted() {
    this.getAjaxGetDictItems()
  },
  methods: {

// 获取数字字典
    getAjaxGetDictItems() {
      const arr = [
        { code: "mes_hr_train_path_detail_type", key: "hrTrainPathDetailTypeKeys" },
      ];
      getDictItemsArr(this, arr);
    },

    trainPathChange(key){
      this.form.projectContent = this.hrTrainPathDetailTypeKeys[key]
    },

    showModal(record) {
      Object.assign(this.form, this.$options.data().form);
      if (record) {
        this.state = "edit";
        for (let key in this.form) {
          this.form[key] = record[key];
        }
        this.editId = record.id;
      } else {
        this.state = "add";
      }

      this.visible = true;
    },
    handleOk(e) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.form));
          params.trainPathId = this.selectedId


          this.confirmLoading = true;
          if (this.state == "add") {
            postAction(this.url.add, params).then((res) => {
              if (res.success) {
                this.visible = false;
                this.$emit("handleSuccess");
              } else {
                this.$message.error(res.msg);
              }
              this.confirmLoading = false;
            });
          }

          if (this.state == "edit") {
            params.id = this.editId;
            putAction(this.url.edit, params).then((res) => {
              if (res.success) {
                this.visible = false;
                this.$emit("handleSuccess");
              } else {
                this.$message.error(res.msg);
              }
              this.confirmLoading = false;
            });
          }
        }
      });
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
  },
};
</script>
